<template>
  <div>
         <el-tabs value="first">
          <el-tab-pane label="角色管理" name="first">
                <el-table :data="roles" border style="width: 100%">
                <el-table-column prop="name" label="角色名称"> </el-table-column>
                <el-table-column prop="authName" label="角色标识"></el-table-column>
                <el-table-column prop="description" label="描述"></el-table-column>
                  <el-table-column prop="systemed" label="系统内定">
                    <template slot-scope="scope">
                            <span style="color:red" v-if="scope.row.systemed"> 系统</span>
                            <span style="color:green" v-else> 自定义</span>
                  </template>
                </el-table-column>
                   <el-table-column label="操作" style="width: 10%">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="toset(scope.row)">设置</el-button>
                  </template>
                </el-table-column>
              </el-table>
          </el-tab-pane>
          <el-tab-pane label="权限管理" name="second">
             <div style="text-align:left">
                <el-button type="primary" icon="el-icon-edit" size="mini" @click="editMenuVisible=true">添加根节点</el-button>
              </div>
                <el-tree width="300" ref="tree"
                  :data="menus"
                  show-checkbox
                  node-key="id"
                  default-expand-all
                  :expand-on-click-node="false">
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                         <span>{{ node.label }}</span>
                            <el-button
                            type="text"
                            size="mini"
                            @click="() =>editWin(node,data,'0')">
                            添加
                          </el-button>
                          <el-button
                            type="text"
                            size="mini"
                            @click="() => editWin(node,data,'1')">
                            修改
                          </el-button>
                         
                            <el-button slot="reference"
                              type="text"
                              size="mini"
                              @click="() => remove(node, data)">
                              删除
                            </el-button>
                    
                          
                  </span>
                </el-tree>
          </el-tab-pane>
        </el-tabs>

       <!--编辑菜单-->
        <el-dialog title="编辑" :visible.sync="editMenuVisible" style="text-align:left">
          <el-form :model="menuform" label-position="left" label-width="80px">
            <el-form-item label="菜单名称" >
              <el-input v-model="menuform.name" autocomplete="off"></el-input>
            </el-form-item>
             <el-form-item label="类型" >
                 <el-select v-model="menuform.type" placeholder="请选择">
                      <el-option value="MENU" label="菜单"></el-option>
                      <el-option value="FUNC" label="功能"></el-option>
                 </el-select>
            </el-form-item>
             <el-form-item label="地址" >
              <el-input v-model="menuform.url" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="路由" >
              <el-input v-model="menuform.router" autocomplete="off"></el-input>
            </el-form-item>
             <el-form-item label="排序" >
             <el-input-number v-model="menuform.sortNum"  :min="0" :max="50" ></el-input-number>
            </el-form-item>
            
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="editMenuVisible = false">取 消</el-button>
            <el-button type="primary" @click="addMenu">确 定</el-button>
          </div>
        </el-dialog>


         <!--设置权限菜单-->
        <el-dialog  :visible.sync="setMenuVisible" style="text-align:left">
         
          <el-tree width="300" ref="settree"
                  :data="menus"
                  show-checkbox
                  node-key="id"
                  default-expand-all
                  :expand-on-click-node="false">
                  <span class="custom-tree-node" slot-scope="{ node }">
                         <span>{{ node.label }}</span>  
                  </span>
                </el-tree>
           
          <div slot="footer" class="dialog-footer">
            <el-button @click="setMenuVisible = false">取 消</el-button>
            <el-button type="primary" @click="binded">确 定</el-button>
          </div>
        </el-dialog>
  </div>
</template>

<script>
import { appRoles,appMenus,appAddResource,appDeleResource,appRoleBindedResource,appBindsResource} from "@/libs/api.js";
export default {
  methods: {
    editWin(node,data,type){
      this.chooseNode=data;
      this.editMenuVisible=true;
      if(type=='1'){
          data.modify="1";
          this.menuform=data;
      }else{
        this.menuform={
           "name":"",
            "url":"http://www.baidu.com",
            "router":"/app",
            "sortNum":1,
            "type":"MENU",
            "appId":this.$route.query.id,
            "parentId":"",
            "id":""
         }
      }
    
    },
     addMenu(){
      if(this.chooseNode){
          this.menuform.parentId=this.chooseNode.id;
      }
      appAddResource(this.menuform).then(res => {
          this.$util.success("操作成功");
          this.editMenuVisible=false;
          res.label = res.name;
          if(this.menuform.modify=="1"){
             this.chooseNode=res;
          }else{
              if(!this.chooseNode){
                  this.menus.push(res);
              }else{
                  if(this.chooseNode){
                    if(this.chooseNode.children){
                      this.chooseNode.children.push(res);
                    }else{
                      this.chooseNode.children= new Array();
                      this.chooseNode.children.push(res);
                    }
                  }
              }
          }
       
      });
     },
     remove(node,data){
          appDeleResource(data.id).then(res => {
             this.$util.success("操作成功");
             this.$refs.tree.remove(data);
          });
     },
     binded(){
        let array = this.$refs.settree.getCheckedNodes(false,true);
        if(array && array.length>0){
          let param = {"roleId":this.tosetRoleId,"resourceIds":[]};
          for(var i=0;i<array.length;i++){
            param.resourceIds.push(array[i].id);
          }
          appBindsResource(param).then(res => {
                this.tosetRoleId="";
                this.$util.success("操作成功");
                this.setMenuVisible = false;
          });
        }
    
     },

     toset(row){
        this.setMenuVisible=true;
        this.tosetRoleId=row.id;
        appRoleBindedResource(row.id).then(res => {
           if(res && res.length>0){
             for(var i=0;i<res.length;i++){
               this.$refs.settree.setChecked(res[i].id,true,false);
             }
           }
        });
     }

  },

  mounted() {
    if (this.$route.query.id) {
        appRoles(this.$route.query.id).then(res => {
          this.roles=res;
        });
        appMenus(this.$route.query.id).then(res => {
           this.menus=res;
        });
    }
  },

  data() {
    return {
         roles:[],
         menus:[],
         editMenuVisible:false,
         setMenuVisible:false,
         chooseNode:null,
         tosetRoleId:"",
         menuform:{
           "name":"",
            "url":"http://www.baidu.com",
            "router":"/app",
            "sortNum":1,
            "type":"MENU",
            "appId":this.$route.query.id,
            "parentId":"",
            "id":""
         }
    };
  }
};
</script>
